<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remdator Examples</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../jquery-ext.js" type="text/javascript"></script>
<script src="../../remdator-exceptions.js" type="text/javascript"></script>
<script src="../../DataElement.js" type="text/javascript"></script>
<script src="../../SingleDataElement.js" type="text/javascript"></script>
<script src="../../DataStore.js" type="text/javascript"></script>
<script src="../../TextFieldFormElement.js" type="text/javascript"></script>
<script src="../../TextAreaFormElement.js" type="text/javascript"></script>
<script src="../../DivFormElement.js" type="text/javascript"></script>
<script src="../../CheckBoxFormElement.js" type="text/javascript"></script>
<script src="../../CollectionDataElement.js" type="text/javascript"></script>
<script src="../../SelectFormElement.js" type="text/javascript"></script>
<script src="../../RadioTableFormElement.js" type="text/javascript"></script>
<script src="../../ElementDependencyNotifier.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
var $addMark = null;
var $updateMark = null;
var $deleteMark = null;
var $uploadFile = null;

$(document).ready(function() {

	var $classes = $("#classes").remdator_select({
		ajaxOperations : {
			"load" : {
				url : "server/loadclasses.php",
				success : function($ajaxOutputArgs) {
					$ajaxOutputArgs.source.loadItems({ items : $.map($ajaxOutputArgs.output, function($e, $i) {
						return { value : $e["id"], text : $e["class"] };
					}) });
				},
				settings : { dataType : "json" }
			}
		}
	});
	$classes.addRemoteLoadingListener({ listener : function($eventArgs) {
		$("#classesmessage").text("Loading...");
	} });
	$classes.addRemoteReadyListener({ listener : function($eventArgs) {
		$("#classesmessage").text("");
	} });
	$classes.addRemoteErrorListener({ listener : function($eventArgs) {
		$("#classesmessage").text("Error: " + $eventArgs.error);
	} });
	
	
	var $students = $("#students").remdator_select({
		ajaxOperations : {
			"load" : {
				url : "server/loadstudents.php",
				success : function($ajaxOutputArgs) {
					$ajaxOutputArgs.source.loadItems({ items : $.map($ajaxOutputArgs.output, function($e, $i) {
						return { value : $e["id"], text : $e["name"] };
					}) });
				},
				settings : { dataType : "json" }
			}
		}
	});
	$students.addRemoteLoadingListener({ listener : function($eventArgs) {
		$("#studentsmessage").text("Loading...");
	} });
	$students.addRemoteReadyListener({ listener : function($eventArgs) {
		$("#studentsmessage").text("");
	} });
	$students.addRemoteErrorListener({ listener : function($eventArgs) {
		$("#studentsmessage").text("Error: " + $eventArgs.error);
	} });
	$.remdator.elementDependencyNotifier({ dependencies : [$classes], callback : function() {
		$students.callAjaxOperation({ operationName : "load", requestData : { class_id : $classes.getValue() } });
	} });
	
	
	var $marks = $("#marks").remdator_radiotable({
		radioName : "studentmarks",
		fieldNames : [ "subject", "mark", "answerfile", "subject_id" ],
		scrollableParent : $("#scroll"),
		defaultAjaxOperation : {
			errorChecker : function($ajaxOutputArgs) {
				if ($ajaxOutputArgs.output["error"] != "")
				{
					throw new $.remdator.RemoteError({ message : "Validation errors!", data : { field : $ajaxOutputArgs.output["field"], error : $ajaxOutputArgs.output["error"] } });
				}
			},
			success : function($ajaxOutputArgs)
			{
				$ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null });
			},
			settings : { dataType : "json" }
		},
		ajaxOperations : {
			"load" : {
				url : "server/loadmarks.php",
				success : function($ajaxOutputArgs) {
					$ajaxOutputArgs.source.loadItems({ items : $.map($ajaxOutputArgs.output["items"], function($e, $i) {
						return { value : $e["id"], contents : {
							"mark" : $e["mark"],
							"subject" : $e["subject"],
							"subject_id" : $e["subject_id"],
							"answerfile" : $e["answerfile_exists"] ? $("<a></a>").attr("href", "server/answerfiles/"+$e["id"]+".txt").append("link") : ""
						}, isHTML : ["answerfile"] };
					}), smartSelect : true });
				}
			},
			"delete" : {
				url : "server/deletemark.php"
			},
			"reset" : {
				url : "server/reset.php"
			}
		},
		defaultFormOperation : {
			errorChecker : function($formOutputArgs) {
				if ($formOutputArgs.output["error"] != "")
				{
					throw new $.remdator.RemoteError({ message : "Validation errors!", data : { field : $formOutputArgs.output["field"], error : $formOutputArgs.output["error"] } });
				}
			},
			success : function($formOutputArgs)
			{
				$formOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null });
			},
			settings : {
				form : $("#form"),
				iframe : $("#form iframe"),
				dataType : "json",
				preSubmit : function($preSubmitArgs) {
					$('#form input[name="mark"]').val($mark.getValue());
					$('#form input[name="mark_id"]').val($marks.getValue());
					$('#form input[name="subject_id"]').val($subjects.getValue());
					$('#form input[name="student_id"]').val($students.getValue());
				}
			}
		},
		formOperations : {
			"add" : {
				url : "server/addmark.php"
			},
			"update" : {
				url : "server/updatemark.php"
			}
		}
	});
	$marks.addRemoteLoadingListener({ listener : function($eventArgs) {
		$("#marksmessage").text("Loading...");
		$("#markmessage").text("");
	} });
	$marks.addRemoteReadyListener({ listener : function($eventArgs) {
		$("#marksmessage").text("");
		$("#markmessage").text("");
	} });
	$marks.addRemoteErrorListener({ listener : function($eventArgs) {
		$("#marksmessage").text("Error: " + $eventArgs.error);
		
		if ($eventArgs.data != null)
		{
			$("#"+$eventArgs.data.field+"message").text($eventArgs.data.error);
		}
	} });
	$.remdator.elementDependencyNotifier({ dependencies : [$students], callback : function() {
		$marks.callAjaxOperation({ operationName : "load", requestData : { student_id : $students.getValue() } });
	} });
	
	
	var $subjects = $("#subjects").remdator_select({
		ajaxOperations : {
			"load" : {
				url : "server/loadsubjects.php",
				success : function($ajaxOutputArgs) {
					$ajaxOutputArgs.source.loadItems({ items : $.map($ajaxOutputArgs.output, function($e, $i) {
						return { value : $e["id"], text : $e["subject"], select : false };
					}) });
				},
				settings : { dataType : "json" }
			}
		}
	});
	$subjects.addRemoteLoadingListener({ listener : function($eventArgs) {
		$("#subjectsmessage").text("Loading...");
	} });
	$subjects.addRemoteReadyListener({ listener : function($eventArgs) {
		$("#subjectsmessage").text("");
	} });
	$subjects.addRemoteErrorListener({ listener : function($eventArgs) {
		$("#subjectsmessage").text("Error: " + $eventArgs.error);
	} });
	$.remdator.elementDependencyNotifier({ dependencies : [$marks], callback : function() {
		$subjects.setValue({ value : $marks.getContents({ value : "" })["subject_id"].text() });
	} });
	
	
	var $mark = $("#mark").remdator_textfield({
	});
	$.remdator.elementDependencyNotifier({ dependencies : [$marks], callback : function() {
		$mark.setValue({ value : $marks.getContents({ value : "" })["mark"].text() });
	} });
	
	
	$("#add_mark").click(function() {
		$marks.callFormOperation({ operationName : "add" });
	});
	
	$("#update_mark").click(function() {
		$marks.callFormOperation({ operationName : "update" });
	});
	
	$("#delete_mark").click(function() {
		$marks.callAjaxOperation({ operationName : "delete", requestData : { mark_id : $marks.getValue() } });
	});
	
	$("#refresh").click(function() {
		$marks.callAjaxOperation({ operationName : "load", requestData : null });
	});
	
	$("#reset").click(function() {
		$marks.callAjaxOperation({ operationName : "reset", requestData : { } });
	});
	
	$classes.callAjaxOperation({ operationName : "load", requestData : { } });
	$subjects.callAjaxOperation({ operationName : "load", requestData : { } });

});
//-->
</script>
</head>
<body>
	<span id="classesmessage"></span><select id="classes"></select>
	<span id="studentsmessage"></span><select id="students"></select><br />
	
	<span id="marksmessage"></span>
	<div id="scroll" style="border-style:solid;height:200px;overflow:auto;">
		<table id="marks" border="1">
			<thead><tr><th></th><th>Subject</th><th>Mark</th><th>Answer file</th><th style="display:none;">subject_id</th></tr></thead>
			<tbody><tr><td></td><th></th><td></td><td></td><td style="display:none"></td></tr></tbody>
		</table>
	</div>
	<br />
	
	<table>
		<tr><th>Subject</th><td><span id="subjectsmessage"></span><select id="subjects"></select></td></tr>
		<tr><th>Mark</th><td><span id="markmessage"></span><input type="text" id="mark" /></td></tr>
	</table>
	
	<form id="form" method="post" enctype="multipart/form-data">
		<input type="hidden" name="mark" />
		<input type="hidden" name="mark_id" />
		<input type="hidden" name="subject_id" />
		<input type="hidden" name="student_id" />
		<input type="file" name="answerfile" />
		
		<iframe name="fileframe" style="display:none;"></iframe>
	</form>
	
	<input type="button" value="Add" id="add_mark" />
	<input type="button" value="Update" id="update_mark" />
	<input type="button" value="Remove" id="delete_mark" />
	<br />
	<br />
	<br />
	<br />
	<input type="button" value="refresh" id="refresh" />
	<input type="button" value="reset" id="reset" />
</body>
</html>